<template>
  <div>
    <city-header></city-header>
    <city-selected></city-selected>
    <city-items :listA="cityList"
                :listB="cityAlp"
    ></city-items>
  </div>
</template>

<script>
import CityHeader from './component/Header'
import CitySelected from './component/Selected'
import CityItems from './component/Items'
import axios from 'axios'

export default {
  name: 'City',
  components: {
    CityHeader,
    CitySelected,
    CityItems
  },
  data () {
    return {
      cityList: [],
      cityAlp: []
    }
  },
  methods: {
    getHomeInfo () {
      axios.get('static/city.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      if (res.data) {
        this.cityList = res.data.cities.domhotcities[0].cities
        this.cityAlp = res.data.cities.domestic
      }
    }
  },
  mounted () {
    this.getHomeInfo()
  }
}
</script>

<style lang="styuls">
</style>
